<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
</head>
<body>
    <h1>axios拦截器执行顺序和错误处理</h1>
    <button>点击我发送请求</button>
    <script>
        // 一、请求拦截器 
        // 请求拦截器的执行顺序：  多个请求拦截器 执行顺序是倒序；
        axios.interceptors.request.use(function(config){
            // 请求成功的时候执行
            console.log("111request")
            return config;
        },function(err){
            console.log(err); // 请求错误的时候执行
        })

        axios.interceptors.request.use(function(config){
            console.log("222request")
            // 请求成功的时候执行
            return config;
        },function(err){
            console.log(err); // 请求错误的时候执行
        })

        axios.interceptors.request.use(function(config){
            console.log("333request")
            // 请求成功的时候执行
            return config;
        },function(err){
            console.log(err); // 请求错误的时候执行
            return Promise.reject(err);
        })


        // 二、返还拦截器 
        // 多个返还拦截器的 执行顺序是正序执行 ；
        
        // 错误处理 类似promise的错误 ；

        axios.interceptors.response.use((response)=>{
            console.log("1111response")
            throw new Error("第一个返还拦截器错误了");
            return response
        },err=>{
            console.log(err);
            return Promise.reject(err);
        })

        axios.interceptors.response.use((response)=>{
            console.log("222response")
            return response
        },err=>{
            console.log(err);
            // 没有返还值 ： 
            // 1.throw error  2. 返还失败状态的promise对象
            return Promise.reject(err);
        })

        axios.interceptors.response.use((response)=>{
            console.log("333response")
            return response
        },err=>{
            console.log(err);
            return Promise.reject(err);
        })



        let btn = document.querySelector("button");
        btn.onclick = function(){
            axios.get("/getdata").then(res=>{
                console.log(res);
            }).catch(err=>{
                console.log("??",err);
            })
        }

        /* 
        一、拦截器执行顺序 ： 1.请求是倒序执行  2.返还是正序执行
        二、错误处理 需要返还一个 失败状态的promise对象 把 错误传递下去。
        
        
        
        */

    </script>
</body>
</html>